<template>
  <div class="content">
    <div class="content97">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">总体分析</el-menu-item>
 
  <el-menu-item index="2" >客户分析</el-menu-item>
   <el-menu-item index="3">媒介分析</el-menu-item>
 
  <el-menu-item index="4" >自定义分析</el-menu-item>
   <el-menu-item index="5">销售预测</el-menu-item>
   <el-menu-item index="6">业务跟踪</el-menu-item>
</el-menu>
<totaity v-show="activeIndex==1"></totaity>
<customer v-if="activeIndex==2"></customer>
<analysis v-if="activeIndex==3"></analysis>
<custom v-show="activeIndex==4"></custom>
<market v-if="activeIndex==5"></market>
<Business v-if="activeIndex==6"></Business>

    </div>
    
  </div>
</template>
<script>
import analysis from './components/analysis'
import totaity from './components/totality'
import customer from './components/customer_analysis'
import custom from './components/custom'
import market from './components/marketing_forecasting'
import Business from './components/Business_tracking'

export default {
  components:{
    totaity,
    customer,
    analysis,
    custom,
    market,
    Business
  },
  data() {
    return {
      activeIndex:'1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.activeIndex=""+key
      }
  },
}
</script>
<style lang="scss" scoped>
.content97{
  width: 97%;
  margin: 0 auto;
}
</style>